import React, {useState} from 'react'

export default function Interview() {
    // 所有的事件
    let [list3, setList3] = useState([])
    // 任务
    let [task, setTask] = useState('')
    // 单价
    let [price, setPrice] = useState(0)
    // 货币类型
    let [type, setType] = useState(1)
    // 修改任务
    let change = e => {
        console.log(e.target.value);
        setTask(e.target.value)
    }
    // 新增任务
    let add = ()=>{
        let arr = [...list3];
        arr.push({
            task: task,
            price,
            type,
            isCheck: false,
            id: arr.length+1
        });
        // console.log(arr);
        setList3(arr);
        setTask('')
        console.log(list3);
    }
    // 修改货币类型
    let changeType = e => {
        setType(e.target.value);
    }
    let checkToggle = (id) => {
        console.log(id);
        // 勾选
        let arr = [...list3]
        // arr[index].isCheck = !arr[index].isCheck;
        arr.forEach(item => {
            if (item.id === id) {
                item.isCheck = !item.isCheck
            }
        })
        setList3(arr)
        console.log(777, list3);
    }
  return (
    <div>
        <input placeholder='任务' value={task} onChange={(e) => change(e)}></input>
        <input placeholder='价格' value={price} onChange={(e) => setPrice(e.target.value)}></input>
        <select value={type} onChange={e => changeType(e)}>
            <option value="1">人民币</option>
            <option value="2">卢布</option>
            <option value="3">美元</option>
        </select>
        <button onClick={()=>add()}>add</button>
        <p>待完成</p>
        <ul>
            {
                list3.filter(item=>{
                    return !item.isCheck
                }).map((item, index) => {
                    return (
                        <li key={index}>
                            <input checked={item.isCheck} type="checkbox" value={item.isCheck} onChange={()=>checkToggle(item.id)}></input>
                            <span>{item.task}</span>
                            <span>{item.price}</span>
                        </li>
                    )
                })
            }
        </ul>
        <hr></hr>
        <p>已完成</p>
        <ul>
            {
                list3.filter(item=>{
                    return item.isCheck
                }).map((item, index) => {
                    return (
                        <li key={index+'done'}>
                            <input checked={item.isCheck} type="checkbox" value={item.isCheck} onChange={()=>checkToggle(item.id)}></input>
                            <span>{item.task}</span>
                            <span>{item.price}</span>
                        </li>
                    )
                })
            }
        </ul>
    </div>
  )
}
